import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Breadcrumb, Row, Col, Input, Tabs,Button,message,Card,Form,Radio,Select,Cascader   } from 'antd';
import  './FirstContent.scss';
import API from '../../../../api/files/index';
// import '../../../../../client/distpicker/distpicker_zh.js';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;

class FirstContent extends Component {

    constructor (props) { 
        super(props);
        this.state = {
            accountShow:false,
            value: 1,
            nickname:'',
            fullname:'',
            type:'',
            idNum:'',
            phone:'',
            // registerAddress:'',
            // workAddress:'',
            remark:'',
            regCapital: {
              currency: "USD",
              amount: '',
            },
            paidCapital:{
              currency: "USD",
              amount: '',
            },
            bankAccounts: [
              {
                  type: '',
                  accountNo: '',
                  accountName: '',
                  bank:'',
                  branch:'',
                  financialClerk:'',
                  operateClerk:'',
                  manageClerk: '',
              }
          ],
          legalEntity:{
            fullname: '',
            idNum:'',
          },   

        };
    }

componentDidMount () {
  $("#distpicker").distpicker({
    autoselect: 0,
    placeholder: true,
    valueType: 'name',
    country: '—— 请选择国家 ——',
    province: '—— 请选择 ——',
    city: '—— 请选择 ——',
    district: '—— 请选择 ——'
  });
  $("#distpicker2").distpicker({
    autoselect: 0,
    placeholder: true,
    valueType: 'name',
    country: '—— 请选择国家 ——',
    province: '—— 请选择 ——',
    city: '—— 请选择 ——',
    district: '—— 请选择 ——'
  });
  this.props.onRef(this);
}

 onChange = (e) => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  }

handleProvinceChange = (value) => {
    this.setState({
      cities: cityData[value],
      secondCity: cityData[value][0],
    });
  }

onSecondCityChange = (value) => {
    this.setState({
      secondCity: value,
    });
  }

   addAccount () {
    this.setState({
      accountShow:true
    });
    }

  handleSaveContent = async(e) => {
    e.preventDefault();
    var param = {};
    var params;
   await this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
          params = {
          nickname: values.nickname?values.nickname:'',
          fullname: values.fullname?values.fullname:'',
          type:values.type?values.type:'',
          idNum:values.idNum?values.idNum:'',
          phone: values.phone?values.phone:'',
          // registerAddress:values.registerAddress?values.registerAddress:'',
          // workAddress:values.workAddress?values.workAddress:'',
          remark:values.remark?values.remark:'',
          regCapital: {
            currency: "CNY",
            amount: values.regCapital?values.regCapital:'',
          },
          paidCapital:{
            currency: "USD",
            amount: values.paidCapital?values.paidCapital:'',
          },
          bankAccounts: [
            {
                type: values.accountType?values.accountType:'',
                accountNo: values.accountNo?values.accountNo:'',
                accountName: values.accountName?values.accountName:'',
                bank: values.bank?values.bank:'',
                branch: values.branch?values.branch:'',
                financialClerk: values.financialClerk?values.financialClerk:'',
                operateClerk: values.operateClerk?values.operateClerk:'',
                manageClerk: values.manageClerk?values.manageClerk:'',
            }
        ],
        legalEntity:{
          fullname: values.legalEntityFullname?values.legalEntityFullname:'',
          idNum: values.legalEntityIdNum?values.legalEntityIdNum:'',
        },   
        };

        this.setState({
          nickname: values.nickname?values.nickname:'',
          fullname: values.fullname?values.fullname:'',
          type:values.type?values.type:'',
          idNum:values.idNum?values.idNum:'',
          phone: values.phone?values.phone:'',
          // registerAddress:values.registerAddress?values.registerAddress:'',
          // workAddress:values.workAddress?values.workAddress:'',
          remark:values.remark?values.remark:'',
          regCapital: {
            currency: "CNY",
            amount: values.regCapital?values.regCapital:'',
          },
          paidCapital:{
            currency: "USD",
            amount: values.paidCapital?values.paidCapital:'',
          },
          bankAccounts: [
            {
                type: values.accountType?values.accountType:'',
                accountNo: values.accountNo?values.accountNo:'',
                accountName: values.accountName?values.accountName:'',
                bank: values.bank?values.bank:'',
                branch: values.branch?values.branch:'',
                financialClerk: values.financialClerk?values.financialClerk:'',
                operateClerk: values.operateClerk?values.operateClerk:'',
                manageClerk: values.manageClerk?values.manageClerk:'',
            }
        ],
        legalEntity:{
          fullname: values.legalEntityFullname?values.legalEntityFullname:'',
          idNum: values.legalEntityIdNum?values.legalEntityIdNum:'',
        },  
        });

      }
    });
    const response = await API.addManage(params);
    const { code, data } = response;
    if (code === 1) {
      message.success('添加成功');
      param.data = data;
      param.params = params;
    }
  return param;
 }

// add=async(e)=>{
// const id= await this.handleSaveContent(e);
//   alert(id)
// }

render () {
         var screenHeight = document.body.clientHeight;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
          labelCol: {
            span: 5,
          },
          wrapperCol: {
            span: 11,
          },
        };
        
    return (


        <Form layout="vertical" onSubmit={this.handleSaveContent}  style={{overflowY:'scroll',maxHeight: screenHeight-360}}>
          <Button onClick={(e)=>this.add(e)}>aaaaaaaaa</Button>
          <div style={{background:'#eceff3',height:10}}></div>
          <div style={{ background: '#fff', padding: '5px 30px'}}>
          <Card title="主体信息" style={{marginBottom: 24}} bordered={false}>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="主体类型">
                  {getFieldDecorator('type', {
                      initialValue:this.state.type,
                     rules: [{
                      required: true, message: '请选择主体类型',
                    }],
                  })(<Select
                    placeholder="请选择">
                    <Option value="limited">管理公司</Option>
                    <Option value="partner">合伙企业</Option>
                    <Option value="deal-fund">契约型基金</Option>
                    </Select>)}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label="合伙类型">
                  {getFieldDecorator('partnerType', {
                    initialValue:this.state.partnerType,
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Select
                    placeholder="请选择">
                    <Option value="manage-investment">投资管理</Option>
                    <Option value="invest-share">股权投资</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                <Form.Item label="是否启用">
                  {getFieldDecorator('owner', {
                    initialValue:2,
                    // rules: [{ required: true, message: '请选择' }],
                  })(
                    <RadioGroup onChange={this.onChange}>
                    <Radio value={1}>是</Radio>
                    <Radio value={2}>否</Radio>
                  </RadioGroup>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="主体全名">
                  {getFieldDecorator('fullname', {
                     initialValue:this.state.fullname,
                    rules: [{ required: true, message: '请输入主体名称' }],
                  })(
                    <Input placeholder="请输入主体名称" />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label="主体简称">
                {getFieldDecorator('nickname', {
                   initialValue:this.state.nickname,
                    rules: [{ required: true, message: '请输入' }],
                  })(
                    <Input placeholder="请输入主体简称" />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                <Form.Item label="证件号码">
                  {getFieldDecorator('idNum', {
                    initialValue:this.state.idNum,
                  })(
                    <Input placeholder="请输入" />
                  )}
                </Form.Item>
              </Col>
            </Row>

             <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="固定电话">
                  {getFieldDecorator('phone', {
                    initialValue:this.state.phone,
                  })(
                    <Input placeholder="请输入固定电话" />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 14, offset: 2 }} lg={{ span: 16 }} md={{ span: 12 }} sm={24}>
                <Form.Item label="注册地址">
                {getFieldDecorator('registerAddress', {
                  })(
                    <div>
                     <div id="distpicker">
                      <select style={{width:90}}></select>
                      <select style={{width:90}}></select>
                      <select style={{width:90}}></select>
                      <select style={{width:90}}></select>
                    </div>
                    <Input style={{width:200}} placeholder="详细地址" /> 
                  </div> 
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="注册地">
                  {getFieldDecorator('register', {
                  })(
                    <Input placeholder="注册城市" />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 14, offset: 2 }} lg={{ span: 16 }} md={{ span: 12 }} sm={24}>
                <Form.Item label="办公地址">
                {getFieldDecorator('workAddress', {
                  })(
                    <div>
                    <div id="distpicker2">
                      <select style={{width:90}}></select>
                      <select style={{width:90}}></select>
                      <select style={{width:90}}></select>
                      <select style={{width:90}}></select>
                    </div>
                    <Input style={{width:200}} placeholder="详细地址" />
                  </div>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="委派代表/法人">
                  {getFieldDecorator('legalEntityFullname', {
                      initialValue:this.state.legalEntity.fullname,
                  })(
                    <Input placeholder="请输入" />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 14, offset: 2 }} lg={{ span: 16 }} md={{ span: 12 }} sm={24}>
                <Form.Item label="委派代表/法人身份证号">
                  {getFieldDecorator('legalEntityIdNum', {
                      initialValue:this.state.legalEntity.idNum?this.state.legalEntity.idNum:'',
                  })(
                    <Input placeholder="请输入" />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="主体备注">
                  {getFieldDecorator('remark', {
                  })(
                    <Input placeholder="请输入" />
                  )}
                </Form.Item>
              </Col>
            </Row>
        </Card>
       </div>

       <div style={{background:'#eceff3',height:10}}></div>
       <div style={{ background: '#fff', padding: '5px 30px'}}>
       <Card title="资本信息" style={{marginBottom: 24}} bordered={false}>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label="注册资本">
                  {getFieldDecorator('regCapital', {
                  })( <span>
                    {/* <Select
                      placeholder="账户类型">
                      <Option value="basic">基本户</Option>
                      <Option value="trustee">托管户</Option>
                    </Select> */}
                    <Input placeholder="请输入" /></span>)}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label="实缴资本">
                  {getFieldDecorator('paidCapital', {
                  })(
                    <Input placeholder="请输入" />
                  )}
                </Form.Item>
              </Col>
            </Row>
        </Card>
        </div>

       <div style={{background:'#eceff3',height:10}}></div>
       <div style={{ background: '#fff', padding: '5px 30px'}}>
       <Card title="账户管理" extra={<a href="#"  onClick={() => this.addAccount()}>新增账户</a>} bordered={false} style={{textAlign:'left'}}>
       {this.state.accountShow == true?
      <Card type="inner"  title="新建账户" style={{marginBottom: 24}} bordered={false}>
      {/* <Form layout="horizontal" hideRequiredMark  onSubmit={this.handleSaveFirstContent}> */}
        <Row gutter={16}>
          <Col lg={8} md={12} sm={24}>
            <Form.Item  label="账户类型">
              {getFieldDecorator('accountType', {
              })( <Select
                placeholder="账户类型">
                <Option value="basic">基本户</Option>
                <Option value="trustee">托管户</Option>
                <Option value="raise">募集户</Option>
                <Option value="general">一般户</Option>
              </Select>)}
            </Form.Item>
          </Col>
          <Col  xl={{ span: 8}} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
            <Form.Item  label="账户号">
              {getFieldDecorator('accountNo', {
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
            <Col  xl={{ span: 8}} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
            <Form.Item  label="账户">
              {getFieldDecorator('accountName', {
                // rules: [{ required: true, message: '请输入' }],
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
        <Col lg={8} md={12} sm={24}>
          <Form.Item  label="开户银行">
            {getFieldDecorator('bank', {
              // rules: [{ required: true, message: '请输入' }],
            })( <Input placeholder="请输入" /> )}
          </Form.Item>
        </Col>
        <Col  xl={{ span: 6}} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
          <Form.Item label="开户行">
            {getFieldDecorator('branch', {
              // rules: [{ required: true, message: '请输入' }],
            })(
              <Input placeholder="请输入" />
            )}
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col lg={8} md={8} sm={24}>
        <Form.Item  label="财务人员">
          {getFieldDecorator('financialClerk', {
            // rules: [{ required: true, message: '请输入' }],
          })(  <Input placeholder="请输入" />)}
        </Form.Item>
        </Col>
        <Col xl={{ span: 8,}} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
        <Form.Item label="操作人员">
          {getFieldDecorator('operateClerk', {
            // rules: [{ required: true, message: '请输入' }],
          })(
            <Input placeholder="请输入" />
          )}
        </Form.Item>
        </Col>
        <Col xl={{ span: 8,}} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
        <Form.Item label="管理人员">
          {getFieldDecorator('manageClerk', {
            // rules: [{ required: true, message: '请输入' }],
          })(
            <Input placeholder="请输入" />
          )}
        </Form.Item>
      </Col>
      </Row>
      </Card>:null
       }
       </Card>
      </div>
    </Form>
          );
    }
}

const WrappedFormContent= Form.create({})(FirstContent);

export default WrappedFormContent;